<template>
    <div class="markdown-container">
        <div class="title">
            <el-input class="input-title" type="text" placeholder="请输入标题......" v-model="articleTitle" maxlength="30"
                show-word-limit>
            </el-input>
            <el-checkbox class="button-cancel" v-model="checked">匿名</el-checkbox>
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submit">提交</el-button>
        </div>
        <div class="tags">
            <el-select v-model="formattedTopic" filterable placeholder="#选择话题" @change="handleSelectChange">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
                @close="handleClose(tag)">
                {{ tag }}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
                @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
        </div>
        <mavon-editor v-model="articleContent" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 800px"
            :navigation="true" />
    </div>
</template>
<script>
//该组件中注释掉的代码为局部注册的方式。
// import { mavonEditor } from "mavon-editor";
// import "mavon-editor/dist/css/index.css";
import axios from "axios";
import discussInfoApi from "@/api/discussInfo";

export default {
    data: function () {
        return {
            dynamicTags: [],
            inputVisible: false,
            inputValue: '',
            articleContent: "",
            articleTitle: "",
            html: "",
            response: {},
            configs: {},
            options: [{
                value: '选项1',
                label: '分享学习',
            }, {
                value: '选项2',
                label: '交流技术',
            }, {
                value: '选项3',
                label: '面试求职',
            }, {
                value: '选项4',
                label: '内推职场',
            }, {
                value: '选项5',
                label: '反馈意见',
            }],
            topic: '分享学习',
            checked: false,
            value: [],
        };
    },
    // components: {
    //   mavonEditor
    // },
    computed: {
        formattedTopic: {
            get() {
                const selectedOption = this.options.find(option => option.value === this.topic);
                return selectedOption ? `#所属话题：${selectedOption.label}` : '#所属话题：' + this.topic;
            },
            set(value) {
                const selectedOption = this.options.find(option => option.value === value);
                this.topic = selectedOption ? selectedOption.value : '';
            }
        }
    },
    methods: {
        handleSelectChange(value) {
            // 这里可以添加值变动时的操作逻辑
            console.log('选择的话题值变动为:', value);
        },
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        // 将图片上传到服务器，返回地址替换到md中
        $imgAdd(pos, $file) {
            var formdata = new FormData();
            formdata.append("file", $file);
            //将下面上传接口替换为你自己的服务器接口
            axios({
                url: "/common/upload",
                method: "post",
                data: formdata,
                headers: { "Content-Type": "multipart/form-data" }
            }).then(url => {
                this.$refs.md.$img2Url(pos, url);
            });
        },
        change(value, render) {
            // render 为 markdown 解析后的结果
            this.html = render;
        },
        async submit() {
            if (this.articleTitle.trim() === "") {
                this.$message.error("请输入标题！");
                return;
            }
            if (this.html.trim() === "") {
                this.$message.error("请输入内容！");
                return;
            }
            const res = await discussInfoApi.submitEditInfo({
                articleTitle: this.articleTitle,
                articleContent: this.html,
                articleCover: "http://114.67.177.147:9000/hxiaoyi/南宁欧洲小镇游记/59e910b4ff66ced7c2600695149ffdf.jpg",
                articleAuthor: "hxiaoyi"
            });
            console.log(res);
            if (res) {
                this.$message({
                    message: '提交成功!',
                    type: 'success'
                });
            } else {
                this.$message.error("提交失败！");
            }
        },
        cancel() {
            this.$router.push("/");
        },

    },

};
</script>
<style scoped>
.title {
    padding-bottom: 10px;
    letter-spacing: 1px;
}

.input-title {
    width: 800px;
    height: 40px;
}

.button-cancel {
    margin-left: 200px;
}

.tags {
    margin-bottom: 10px;
}

.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>